<script setup>
import LetterNavShadow from './components/LetterNavShadow.vue'

import writePage from '@/assets/letter/write-page.png'
import pass from '@/assets/letter/pass.png'
import current from '@/assets/letter/current.png'
import future from '@/assets/letter/future.png'
import bg from '@/assets/letter/bg.png'
import introduce from '@/assets/letter/introduce.png'

import { daysDifferenceFromNow, disableBlackTheme } from './utils/tool'
import {
  letterGetSentCountService,
  letterGetWaitingSendCountService
} from '@/api/letter'
import { ref } from 'vue'
disableBlackTheme()

const navItem = [
  { href: '/', title: '主页' },
  { href: '/letter/pubs', title: '公开信' },
  { href: '/letter/write', title: '撰写信件' },
  { href: '/letter/user', title: '个人中心', blank: true },
  { href: '/letter/docs', title: '用户协议', blank: true }
]

const toWrite = () => {
  window.open('/letter/write', '_blank')
}

// 获整个网站待投递的信件
// 获取整个网站已经投递的信件
const waitingCount = ref(0)
const sentCount = ref(0)
const getCount = async () => {
  let res = await letterGetWaitingSendCountService()
  waitingCount.value = res.data.data
  res = await letterGetSentCountService()
  sentCount.value = res.data.data
}
getCount()
</script>

<!-- 写信网站主页 -->
<template>
  <img :src="bg" alt="" style="position: absolute; width: 100%; z-index: -1" />

  <letter-nav-shadow :navItem="navItem"></letter-nav-shadow>

  <div style="display: flex; justify-content: center">
    <div style="width: 85%">
      <null-box size="150"></null-box>
      <zlcode-h1 class="text">给未来写封信</zlcode-h1>
      <p style="font-size: 17px; padding-top: 12px">
        穿越时光的信使, 不只是信, 更是时间的礼物.
      </p>
      <!-- <p style="font-size: 18px; padding-top: 12px">愿你多年之后，不负所期</p> -->
      <null-box size="50"></null-box>
      <div
        class="show"
        style="
          display: flex;
          justify-content: space-between;
          position: relative;
        "
      >
        <svg
          t="1730646003225"
          class="svg-bgc"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7546"
          width="200"
          height="200"
        >
          <path
            d="M1008.337 135.652l-995.676 309.55 282.064 230.635c-1.014 2.547-1.533 5.323-1.43 8.203l7.167 216.819c0.394 11.434 9.942 20.382 21.375 20.029 0.166 0 0.31-0.103 0.455-0.124 5.551 0 11.061-2.093 15.121-6.463l108.533-114.811 185.151 151.388 377.238-815.228zM866.621 223.079l-548.759 418.188-219.367-179.35 768.126-238.837zM340.229 850.652l-4.681-141.405 78.211 63.961-73.53 77.444zM350.835 668.235l564.481-430.181-299.36 646.958-265.121-216.779z"
            p-id="7547"
            fill="#606266"
          ></path>
        </svg>
        <div class="left">
          <div class="btn-box">
            <div class="btn" @click="toWrite">撰写信件</div>
          </div>
          <div class="data">
            <div>
              <div class="count">{{ waitingCount }}</div>
              <p>封信件待投递</p>
            </div>
            <div>
              <div class="count">{{ sentCount }}</div>
              <p>封信件已投递</p>
            </div>
            <div>
              <div class="count">
                {{
                  daysDifferenceFromNow(new Date(2023, 3, 12).getTime()) * -1
                }}
              </div>
              <p>天已持续运行</p>
            </div>
          </div>
        </div>
        <div class="right">
          <img class="write-page-show" :src="writePage" alt="" />
        </div>
      </div>

      <null-box size="50"></null-box>

      <h1 class="saying">箴言：</h1>
      <null-box size="10"></null-box>

      <div style="position: relative">
        <zlcode-h3>
          “在这瞬息万变的世界里，每一刻的我们都在书写着自己的故事。”
        </zlcode-h3>
        <null-box size="20"></null-box>
        <zlcode-h3>
          “你是否曾幻想过，与未来的自己进行一场跨越时空的对话？”
        </zlcode-h3>
        <svg
          t="1732628116025"
          class="svg-bgc2"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="42364"
          width="200"
          height="200"
        >
          <path
            d="M304.5 691.8c0-145.3 117.8-263 263-263s263 117.8 263 263"
            fill="#FDDA09"
            p-id="42365"
          ></path>
          <path
            d="M567.5 428.8c-16.7 0-32.9 1.7-48.7 4.7 122 22.9 214.3 129.7 214.3 258.3h97.4c0.1-145.2-117.7-263-263-263z"
            fill="#FDA906"
            p-id="42366"
          ></path>
          <path
            d="M772.1 687.3c-8.3 0-15-6.7-15-15 0-66.2-25.8-128.5-72.6-175.4-46.8-46.8-109.1-72.6-175.4-72.6-66.2 0-128.5 25.8-175.4 72.6-46.8 46.8-72.6 109.1-72.6 175.4 0 8.3-6.7 15-15 15s-15-6.7-15-15c0-74.3 28.9-144.1 81.4-196.6 52.5-52.5 122.3-81.4 196.6-81.4s144.1 28.9 196.6 81.4c52.5 52.5 81.4 122.3 81.4 196.6 0 8.3-6.7 15-15 15z"
            fill=""
            p-id="42367"
          ></path>
          <path
            d="M914.1 704.5H120c-8.3 0-15-6.7-15-15s6.7-15 15-15h794.1c8.3 0 15 6.7 15 15s-6.7 15-15 15zM755.2 777.4H278.8c-8.3 0-15-6.7-15-15s6.7-15 15-15h476.5c8.3 0 15 6.7 15 15s-6.8 15-15.1 15zM605.6 858.1H428.5c-8.3 0-15-6.7-15-15s6.7-15 15-15h177.1c8.3 0 15 6.7 15 15s-6.8 15-15 15zM179.4 641h-63.5c-8.3 0-15-6.7-15-15s6.7-15 15-15h63.5c8.3 0 15 6.7 15 15s-6.7 15-15 15zM515.9 323.4c-8.3 0-15-6.7-15-15V181.3c0-8.3 6.7-15 15-15s15 6.7 15 15v127.1c0 8.3-6.7 15-15 15zM271 422.9c-3.8 0-7.7-1.5-10.6-4.4l-56.2-56.2c-5.9-5.9-5.9-15.4 0-21.2 5.9-5.9 15.4-5.9 21.2 0l56.2 56.2c5.9 5.9 5.9 15.4 0 21.2-2.9 3-6.8 4.4-10.6 4.4zM754.8 422.9c-3.8 0-7.7-1.5-10.6-4.4-5.9-5.9-5.9-15.4 0-21.2l56.2-56.2c5.9-5.9 15.4-5.9 21.2 0 5.9 5.9 5.9 15.4 0 21.2l-56.2 56.2c-2.9 3-6.7 4.4-10.6 4.4z"
            fill=""
            p-id="42368"
          ></path>
          <path
            d="M441.2 544.2a18.8 17.8 0 1 0 37.6 0 18.8 17.8 0 1 0-37.6 0Z"
            fill="#050400"
            p-id="42369"
          ></path>
          <path
            d="M553.9 544.2a18.8 17.8 0 1 0 37.6 0 18.8 17.8 0 1 0-37.6 0Z"
            fill="#050400"
            p-id="42370"
          ></path>
          <path
            d="M491.3 577.5c0 13.1 11.2 23.7 25 23.7s25-10.6 25-23.7h-50z"
            fill="#050400"
            p-id="42371"
          ></path>
          <path
            d="M406.9 588.6a21.9 20.7 0 1 0 43.8 0 21.9 20.7 0 1 0-43.8 0Z"
            fill="#FDA906"
            p-id="42372"
          ></path>
          <path
            d="M582.1 588.6a21.9 20.7 0 1 0 43.8 0 21.9 20.7 0 1 0-43.8 0Z"
            fill="#FDA906"
            p-id="42373"
          ></path>
        </svg>
      </div>
      <null-box size="100"></null-box>

      <div class="why">
        <h1 class="why-title">为什么要给未来写信？</h1>
        <div
          class="content"
          style="display: flex; justify-content: space-between"
        >
          <div class="con-box">
            <img
              :src="pass"
              alt=""
              style="width: 90px; transform: translateY(8px) scale(1.15)"
            />
            <div class="title">记住过去</div>
            <p class="text">
              十年，我们都会改变，都会遗忘，
              曾经坚定的目标，也许都成为了空想，曾经的期望，也许早已烟消云散。
            </p>
          </div>
          <div class="con-box">
            <img :src="current" alt="" style="width: 90px" />
            <div class="title">珍惜当下</div>
            <p class="text">
              此刻，我们应该把握那些小而真实的幸福，
              或许正是明日回忆里的珍宝。不让当下的美好与激情，在岁月的长河中悄然流逝。
            </p>
          </div>
          <div class="con-box">
            <img :src="future" alt="" style="width: 90px" />
            <div class="title">展望未来</div>
            <p class="text">
              未来，或会以全新的姿态，追逐着曾经的梦想，那些今日的期望，一步步凝聚成坚实的成就，不再只是空中楼阁。
            </p>
          </div>
        </div>
      </div>

      <null-box size="100"></null-box>

      <div
        class="as"
        style="width: 100%; display: flex; justify-content: space-between"
      >
        <div class="left" style="width: 48%; text-align: center">
          <img :src="introduce" style="width: 300px" alt="" />
        </div>
        <div style="width: 4%"></div>
        <div class="right" style="width: 48%; text-align: left">
          <h2 style="color: #1688fe">给未来写封信</h2>
          <h1>关于我们</h1>
          <p>
            寄出的信是不可撤回的，希望您也忘掉这件事，直到您收到信的那一天。
          </p>
          <p>
            该模块的功能免费使用，还请您不要浪费资源，或发送无意义内容（包括但不限于重复的标点、文字...）
          </p>
          <p>
            我们允许你给其他邮箱发送信件，但在信中会标注您当前的寄出信件账号所绑定的邮箱。
          </p>
          <p>后台自动检测时一旦发现违规内容该信将不被寄出，并会被后台销毁。</p>
          <p>加入邮箱白名单，你也可以在该网站查看被寄出信的内容。</p>
        </div>
      </div>
      <null-box size="100"></null-box>
    </div>
  </div>
</template>
<style scoped>
.send-svg {
  position: absolute;
  left: -100px;
  bottom: 0;
  z-index: -1;
  opacity: 0.8;
}

.svg-bgc {
  position: absolute;
  left: 2%;
  bottom: 18%;
  z-index: -1;
  opacity: 0.05;
  transform: scale(2);
}

.svg-bgc2 {
  position: absolute;
  left: 70%;
  bottom: 0%;
  z-index: -1;
  opacity: 0.05;
  transform: scale(2);
}

.write-page-show {
  width: 750px;
  border-radius: 10px;
  box-shadow: 0 2px 35px 0 rgba(0, 0, 0, 0.25);
}

.btn {
  width: 129px;
  padding: 15px 28px 16px 29px;
  background-color: #1688fe;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
  text-align: center;
  border-radius: 25px;
  color: #fff;
  line-height: normal;
  cursor: pointer;
  transition: background-color 0.3s;
  font-weight: 500;
  font-size: 16px;
}

.btn:hover {
  background-color: #53a4fa;
}

.data {
  padding-top: 50px;
}
.data .count {
  padding-top: 20px;
  font-size: 36px;
}

.data p {
  color: #6e767b;
  font-size: 12px;
}

.saying {
  color: #1688fe;
  font-weight: 700;
  font-size: 36px;
}

.why-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 50px;
  text-align: center;
}

.con-box {
  width: 280px;
  text-align: center;
}
.con-box .text {
  color: #7e828a;
  font-size: 14px;
}
.con-box .title {
  padding-top: 20px;
  color: #444;
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
}

.as p {
  color: #6c757d;
}
</style>
